<template>
  <div class="p-4">
    <el-form
      :model="detail"
      label-width="100px"
      class="performance-detail"
    >
      <!-- 基础信息 -->
      <div class="form-section">
        <h4 class="section-title">基础信息</h4>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="成单日期">
              <span class="detail-text">{{ detail.pay_at}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="短信成单">
              <span class="detail-text">{{ detail.is_sms === 1 ? '是' : '否' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户邮箱">
              <span class="detail-text">{{ detail.email || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号">
              <span class="detail-text">{{ detail.phone || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="业务员">
              <span class="detail-text">{{ detail.sales?.username || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原归属人">
              <span class="detail-text">{{ getOriginalOwnerName(detail.original_own_id) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="客户类型">
              <span class="detail-text">{{ getCustomerTypeName(detail.customer_type) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户来源">
              <span class="detail-text">{{ getCustomerSourceName(detail.customer_source) }}</span>
            </el-form-item>
          </el-col>
        </el-row>

      </div>
      
      <!-- 支付信息 -->
      <div class="form-section">
        <h4 class="section-title">支付信息</h4>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="SA">
              <span class="detail-text">{{ detail.sa || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="原始金额">
              <span class="detail-text">{{ detail.original_order_fee || '-' }}{{ detail.original_currency || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="原订单金额">
              <span class="detail-text">{{ detail.order_fee || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="支付通道">
              <span class="detail-text">{{ detail.payment_channel || '-' }}</span>
            </el-form-item>
          </el-col>

        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="流水号">
              <span class="detail-text">{{ detail.pr || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款账号">
              <span class="detail-text">{{ detail.ta || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="到账状态">
              <span class="detail-text">{{ getPaymentVerifiedStatusName(detail.payment_verified_status) }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到账备注">
              <span class="detail-text">{{ detail.payment_verified_remark || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
       
        
      </div>
      
      <!-- 备注信息 -->
      <div class="form-section">
        <h4 class="section-title">备注信息</h4>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="最低售价超额">
              <span class="detail-text">{{ detail.exceed_remark || '-' }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="帮扶人">
              <span class="detail-text">{{ detail.help_remark || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 电联字段更新 -->
        <el-row :gutter="16">
          <el-col :span="12">
            <div class="detail-text">
              <el-form-item label="SHOP">
              <span class="detail-text">{{ detail.shop || '-' }}</span>
            </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电联">
              <span class="detail-text">{{ getTelConnectionName(detail.tel_connection_id) || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="数据来源">
              <span class="detail-text">{{ detail.sources_remark || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="16">
          <el-col :span="24">
            <el-form-item label="备注">
              <span class="detail-text">{{ detail.remark || '-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      
      <!-- 系统信息 -->
      <div class="form-section">
        <h4 class="section-title">系统信息</h4>
        <el-row :gutter="16">
          <el-col :span="12">
            <el-form-item label="创建时间">
              <span class="detail-text">{{ detail.created_at }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建人">
              <span class="detail-text">{{ detail.creator?detail.creator :'-' }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { PropType } from "vue";

interface PerformanceDetail {
  id?: number;
  email?: string;
  phone?: string;
  sales_id?: number;
  original_own_id?: number;
  customer_type?: number;
  customer_source?: number;
  is_sms?: number;
  sa?: string;
  original_order_fee?: string;
  order_fee?: string;
  original_currency?: string;
  payment_channel?: string;
  ta?: string;
  pr?: string;
  exceed_remark?: string;
  help_remark?: string;
  shop?: string;
  tel_connection_id?: number;
  sources_remark?: string;
  remark?: string;
  pay_at?: number;
  created_at?: number;
  sales?: {
    username?: string;
  };
  creator?: {
    username?: string;
  };
  payment_verified_status?: number;
  payment_verified_remark?: string;
}

interface SelectOption {
  label: string;
  value: number | string;
  name?: string;
}

interface TelConnectionOption {
  id: number;
  username: string;
  nickname?: string;
}

const props = defineProps({
  detail: {
    type: Object as PropType<PerformanceDetail>,
    default: () => ({})
  },
  salesOptions: {
    type: Array as PropType<SelectOption[]>,
    default: () => []
  },
  customerTypeOptions: {
    type: Array as PropType<SelectOption[]>,
    default: () => []
  },
  customerSourceOptions: {
    type: Array as PropType<SelectOption[]>,
    default: () => []
  },
  telConnectionOptions: {
    type: Array as PropType<TelConnectionOption[]>,
    default: () => []
  }
});

// 格式化时间戳
const formatDate = (timestamp: number | undefined) => {
  if (!timestamp) return '-';
  const date = new Date(timestamp * 1000);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 获取原归属人姓名
const getOriginalOwnerName = (ownerId: number | undefined) => {
  if (!ownerId) return '-';
  const owner = props.salesOptions.find(item => item.value === ownerId);
  return owner?.label || '-';
};

// 获取客户类型名称
const getCustomerTypeName = (typeId: number | undefined) => {
  if (typeId === undefined) return '-';
  const type = props.customerTypeOptions.find(item => item.value === typeId);
  return type?.name || '-';
};

// 获取客户来源名称
const getCustomerSourceName = (sourceId: number | undefined) => {
  if (sourceId === undefined) return '-';
  const source = props.customerSourceOptions.find(item => item.value === sourceId);
  return source?.name || '-';
};

// 获取电联员工姓名
const getTelConnectionName = (telConnectionId: number | undefined) => {
  if (!telConnectionId) return '-';
  const telConnection = props.telConnectionOptions.find(item => item.id === telConnectionId);
  return telConnection?.nickname || telConnection?.username || '-';
};

// 获取到账状态名称
const getPaymentVerifiedStatusName = (status: number | undefined) => {
  if (status === undefined) return '-';
  switch (status) {
    case 0:
      return '待确定';
    case 1:
      return '已到账';
    case 2:
      return '未到账';
    case 3:
      return '部分到账';
    default:
      return '-';
  }
};
</script>

<style scoped>
.performance-detail {
  max-height: 79vh;
  overflow-y: auto;
}

.form-section {
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background-color: #fafafa;
}

.section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  border-bottom: 1px solid #eaeaea;
  padding-bottom: 8px;
}

.detail-text {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
}

.el-form-item {
  margin-bottom: 0px;
}
</style> 